@charset "utf-8";
/*
 * 鸡蛋美术商城 首页CSS样式文件
 * $Author: Jo
 * $Id: index.css 2015-7-30 10:02:00
 * 首页样式 Begin
*/

/* 首页整体公共处理 Begin */
body{background: #fff}
/* 首页整体公共处理 End */

/* 大广告轮播图样式 Begin */
#banner_box{width: 100%; height: 470px;}
#banner{position: relative; width: 1210px; height: 470px; background: #f5f1f5; z-index: 999; margin: 0 auto; overflow: hidden;}
#banner .list{position: absolute; left: 0px; bottom: 0px;}
#banner .list li{float: left; width: 1210px; height: 470px; cursor: pointer; z-index: 1;background-size: cover!important;}
#banner .nav{position: absolute; width: 100%; height: 41px; left: 0px; bottom: 25px; z-index: 4; text-align: center;}
#banner .nav li{width: 106px; height: auto; overflow: hidden; cursor: pointer; display: inline-block; margin-right: 3px;}
#banner .nav li:hover{opacity: 0.8;}
#banner .nav li img{width: 106px; height: 41px;}
#banner .nav .current{opacity: 0.8;}
#banner .arrow{position: absolute; width: 25px; height: 50px; cursor: pointer; top: 50%; margin-top: -25px;}
#banner .go_back{background: url(/img/icon_sprite/index_sprite.png) no-repeat -330px -61px; left: 20px;}
#banner .go_back:hover{background: url(/img/icon_sprite/index_sprite.png) no-repeat -260px -61px;}
#banner .next{background: url(/img/icon_sprite/index_sprite.png) no-repeat -365px -61px; right: 20px;}
#banner .next:hover{background: url(/img/icon_sprite/index_sprite.png) no-repeat -295px -61px;}
/* 大广告轮播图样式 End */

/* 专区类公用样式 Begin */
.area{width: 1210px; height: 491px; margin: 22px auto 0; overflow: hidden;}
.area .top{width: 100%; height: 41px;}
.area .top .on{width: 100%; height: 34px; line-height: 34px;}
.area .top .on .left{float: left;}
.area .top .on .right{float: right; font-size: 14px;}
.area .top .under{width: 100%; height: 7px;}
.area .top .under span{float: left; width: 1210px; height: 2px; background: url(/img/icon_sprite/index_sprite.png) 0 -203px;}
.area .top .right li{float: left; padding: 0 15px;text-align: center; color: #585858; cursor: pointer;}
.area .top .right li:hover,.area .top .right li.hover{color: #a40101;}
.area .top .right .current{color: #a40101;}
.area .top .right .more{float: left; text-align: right; width: 60px; color: #585858;}
.area .top .right .more:hover{opacity: 0.8; color: #585858;}
.area .top .right .more_arrow{float:right; width: 8px; height: 14px; background: url(/img/icon_sprite/index_sprite.png) -260px -37px; margin-top: 10px;}
.area .top .right .vertical_line{float: left; color: #e5e5e5;}
.area .content{width: 100%; height: 450px;}
.area .content,.area .content .left,.area .content .center,.area .content .right{float: left; height: 450px;}
.area .content .left{width: 200px;}
.area .content .left .title{width: 200px; height: 190px;}
.area .content .left .title img{width: 200px; height: 190px;}
.area .content .left .cate{width: 200px; height: 136px; margin-top: 8px;}
.area .content .left .cate a{float: left; width: 85px; height: 18px; line-height: 18px; text-align: left; color: #585858; font-size: 14px; font-family: "Microsoft Yahei","微软雅黑"; padding-left: 15px; overflow: hidden;margin: 8px 0;}
.area .content .left .cate a:hover{text-decoration: underline;color: #8b0409;}
.area .content .left .brand{width: 200px; height: 102px; margin: 12px auto 0 auto; border-bottom: 2px solid #a50c11;}
.area .content .left .brand .box{float: left; width: 100px; height: 51px;}
.area .content .left .brand .box img{float: left; width: 94px; height: 45px; margin: 3px 0 0 3px; overflow: hidden;}
.area .content .left .brand .box img:hover{-webkit-box-shadow: 0 0 3px 3px rgba(0,0,0,.2); -moz-box-shadow: 0 0 3px 3px rgba(0,0,0,.2); box-shadow: 0 0 3px 3px rgba(0,0,0,.2);}
.area .content .center{width: 432px; margin-left: 2px; overflow: hidden; position: relative;}
.area .content .center .slider_block{width: 300%; height: 450px; position: absolute; left: 0px;}
.area .content .center .slider_block a{width: 432px; height: 450px; float: left;}
.area .content .center .slider_block img{width: 432px; height: 450px;}
.area .content .center .nav{width: 100%; height: 9px; text-align: center; position: absolute; bottom: 22px;}
.area .content .center .nav a{width: 36px; height: 9px; background: #9f968f; margin-right: 15px; display: inline-block; float: none; text-align: left;}
.area .content .center .nav a span{width: 0%; height: 9px; background: #a50c11; display: inline-block;}
.area .content .classify_right{width: 576px; height: 450px; overflow: hidden;}
.area .content .classify_right a{float: left; width: 190px; height: 224px; margin: 0 0 2px 2px; overflow: hidden;color: #585858;font-size: 12px;position: relative;}
.area .content .classify_right a img{float: left; width: 170px; height: 170px;margin: 10px 10px 0; -webkit-transition: -webkit-transform .2s linear; -moz-transition: -moz-transform .2s linear; -o-transition: -o-transform .2s linear; transition: transform .2s linear;}
.area .content .classify_right a .name{width: 170px;float: left;padding: 0 10px;line-height: 20px;height: 20px;display: block;overflow: hidden;}
.area .content .classify_right a .price{width: 170px;float: left;color: #a40101;line-height: 30px;padding: 0 10px;font-size: 14px;font-weight: bold;}
.area .content .classify_right a .market-price{color: #969696;text-decoration:line-through;font-size: 12px;font-weight: normal;}
.area .content .classify_right .ad a img{width: 190px; height: 224px;margin: 0;}
.area .content .classify_right .ad a img:hover{-webkit-transform: translateX(-5px); -moz-transform: translateX(-5px); -ms-transform: translateX(-5px); -o-transform: translateX(-5px); transform: translateX(-5px);}
/* 专区类公用样式 End */

/* 品牌专区 Begin */
#brand{width: 1210px; height: 267px; margin: 0 auto; margin-top: 20px; overflow: hidden;}
#brand .top .on .left .brand_title{float:left; width: 183px; height: 15px; background: url(/img/icon_sprite/index_sprite.png) 0 0; margin-top: 9.5px;}
#brand .top .on .right .change_batch{float: left; width: 80px; height: 31px; line-height: 31px; cursor: pointer;}
#brand .top .on .right .change_batch:hover{opacity: 0.8;}
#brand .top .on .right .change_batch:hover .ico{-webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s; transform: rotate(180deg); -webkit-transform: rotate(180deg);}
#brand .top .on .right .change_batch .ico{float: left; width: 16px; height: 14px; background: url(/img/icon_sprite/index_sprite.png) no-repeat -260px -146px; margin-top: 8.5px; -webkit-transition: -webkit-transform 0.3s ease-in 0s; transition: transform 0.3s ease-in 0s;}
#brand .top .on .right .change_batch .text{float: left; margin-left: 6px;}
#brand .content{float: left; width: 100%; height: 226px; overflow: hidden;}
#brand .content .left{float: left; width: 200px; height: 226px;}
#brand .content .left img{float: left; width: 200px; height: 226px;}
#brand .content .right{float: left; width: 1008px; height: 226px; margin-left: 2px;}
#brand .content .right .box{float: left; position: relative; width: 124px; height: 74px; background-color: #f0f0f0; margin: 0 2px 2px 0; cursor: pointer;}
#brand .content .right .box img{width: 124px; height: 74px;}
#brand .content .right .box span{position: absolute; width: 100%; height: 2px; background-color: #a03438; left: 0; bottom: 0; z-index: 100; display: none;}
#brand .content .right .box:hover span{display: block;}
/* 品牌专区 End */

/* 活动版块专区 Begin */
#index_activity{width: 1210px; height: 430px; margin: 0 auto; margin-top: 30px; overflow: hidden;}
#index_activity .content{float: left; width: 1210px; height: 430px; position: relative; overflow: hidden; cursor: pointer;}
#index_activity .content ul li{position: absolute; width: 728px; height: 430px;}
#index_activity .content ul li.one{left: 0;}
#index_activity .content ul li.two{left: 728px;}
#index_activity .content ul li.three{left: 969px;}
#index_activity .content ul li.current{width:728px;}
#index_activity .content ul li .left{width: 241px; height: 430px;}
#index_activity .content ul li .left a{float: left;}
#index_activity .content ul li .left img{width: 241px; height: 430px;background: #ccc;}
#index_activity .content ul li .no_cur{cursor: default; background-color: #f4f4f4!important;}
#index_activity .content ul li .right{width: 487px; height: 430px; background-color: #fff;}
#index_activity .content ul li .right a{float: left;}
#index_activity .content ul li .right .ad{width: 487px; height: 214px; margin: 0 0 2px 0;background: #ccc;}
#index_activity .content ul li .right .on{width: 468px; height: 202px; margin: 17px 0 0 19px; overflow: hidden;}
#index_activity .content ul li .right .on a{float: left; width: 220px; height: 96px; margin: 0 10px 10px 0;}
#index_activity .content ul li .right .on a img{width: 220px; height: 96px;}
#index_activity .content ul li .right .on a .name{width: 200px;height: 15px;line-height: 15px;font-size: 12px;margin-top: -55px;display: block;text-align: center;color: #fff;}
#index_activity .content ul li .right .under{width: 449px; height: 164px; margin: 20px auto 0; overflow: hidden;}
#index_activity .content ul li .right .under span{float: left; width: 449px; height: 40px; line-height: 40px; border-bottom: 1px dashed #e6e6e6}
#index_activity .content ul li .right .under a{float: none; color: #313131; font-size: 14px;}
#index_activity .content ul li .right .under a:hover{color: #ac1919;}
/* 活动版块专区 End */

/* 新上市专区 Begin */
#newly_listed{width: 1212px; height: 561px; margin: 0 auto; margin-top: 22px; overflow: hidden;}
#newly_listed .top .on .left .brand_title{float:left; width: 183px; height: 15px; background: url(/img/icon_sprite/index_sprite.png) 0 -25px; margin-top: 9.5px;}
#newly_listed .content{float: left; width: 100%; height: 520px;}
#newly_listed .content .ad{float: left; width: 200px; height: 259px; margin-right: 2px;background: #f0f0f0;line-height: 28px;color: #303030;font-size: 12px;margin-bottom: 2px;overflow: hidden;}
#newly_listed .content .ad.big-ad{float: left; width: 402px; height: 259px; margin-right: 2px;background: #f0f0f0;line-height: 28px;color: #303030;font-size: 12px;}
#newly_listed .content .ad img{width: 100%;height: 259px;}

/* 新上市专区 End */

/* 横条广告区域 Begin */
.bar_ad{width: 1210px; height: 134px; margin: 26px auto 0;}
.bar_ad a{float: left;}
.bar_ad img{width: 1210px; height: 134px;}
/* 横条广告区域 End */

/* 艺考专区 Begin */
.arts_exam .top .left span{float:left; width: 121px; height: 16px; background: url(/img/icon_sprite/index_sprite.png) 0 -50px; margin-top: 9px;}
/* 艺考专区 End */

/* 少儿儿童专区 Begin */
.children .top .left span{float:left; width: 108px; height: 16px; background: url(/img/icon_sprite/index_sprite.png) 0 -76px; margin-top: 9px;}
/* 少儿儿童专区 End */

/* 油画丙烯水彩专区 Begin */
.acrylic_painting .top .left span{float:left; width: 196px; height: 16px; background: url(/img/icon_sprite/index_sprite.png) 0 -101px; margin-top: 9px;}
/* 油画丙烯水彩专区 End */

/* 设计插画动漫专区 Begin */
.design .top .left span{float:left; width: 234px; height: 16px; background: url(/img/icon_sprite/index_sprite.png) 0 -128px; margin-top: 9px;}
/* 设计插画动漫专区 End */

/* 岩画国画书法专区 Begin */
.rock_painting .top .left span{float:left; width: 153px; height: 15px; background: url(/img/icon_sprite/index_sprite.png) 0 -154px; margin-top: 9.5px;}
/* 岩画国画书法专区 End */

/* 书籍专区 Begin */
.art_books .top .left span{float:left; width: 103px; height: 16px; background: url(/img/icon_sprite/index_sprite.png) 0 -178px; margin-top: 9px;}
/* 书籍专区 End */

/* 更多单品 Begin */
.more_products{height: 694px; margin-bottom: 55px;}
.more_products .top .left span{float:left; width: 157px; height: 16px; background: url(/img/icon_sprite/index_sprite.png) -260px -120px; margin-top: 9px;}
.more_products .content{width: 1215px; height: 653px;}
.more_products .content .box{float: left; width: 398px; height: 209px; border: solid 1px #fff; overflow-y: hidden; margin: 0 5px 10px 0;}
.more_products .content .box:hover{border: 1px solid #a6645a;}
.more_products .content .box img{float: left; width: 195px; height: 195px; margin: 7px 0 7px 3px;}
.more_products .content .box .name{float: left; width: 166px; height: 44px; padding: 33px 10px 33px 20px; color: #000; font-size: 14px; line-height: 22px; overflow: hidden; font-style: normal;}
.more_products .content .box .price{float: left; width: 156px; height: 22px; padding: 13px 10px 51px 30px; line-height: 22px; overflow: hidden;}
.more_products .content .box .shop_price{float: left; font-size: 14px; color: #930005; font-weight: bolder;}
.more_products .content .box .market_price{float: left; font-size: 12px; color: #393939; font-weight: bolder; text-decoration: line-through; margin-left: 11px;}
/* 更多单品 End */

/* 首页鸡蛋白弹窗 Begin */
#mask_index{width: 100%; height: 100%; background: rgba(0,0,0,0.3); position: fixed; top: 0; left: 0; z-index: 9999999999;}
#popup_glair{width: 814px; height: 540px; position: fixed; top: 50%; left: 50%; margin: -270px 0 0 -407px; z-index: 999999999999999; background: url(/img/glair/popup_glair_bg.png);}
#popup_glair .close{width: 27px; height: 26px; float: right; margin: 29px 40px 0 0; cursor: pointer;}
#popup_glair .close:hover{opacity: 0.8;}
#popup_glair .null_glair{width: 490px; height: 260px; margin: 0 auto; margin-top: 197px;}
#popup_glair .null_glair strong{width: 100%; font-size: 38px; color: #292929; line-height: 38px; float: left; text-align: center;margin-bottom: 25px;margin-top: 5px;}
#popup_glair .null_glair p{float: left; width: 100%; text-align: center; font-size: 24px; color: #7c7c7d; line-height: 34px; margin: 0;
letter-spacing:8px;}
#popup_glair .null_glair span{float: left; width: 100%; text-align: center;}
#popup_glair .null_glair span a{width: 178px; height: 36px; border: 2px solid #a20611; line-height: 36px; color: #a20611; font-size: 17px; display: inline-block; margin-top: 30px;}
#popup_glair .null_glair span a:hover{opacity: 0.8;}
#popup_glair .have_glair{width: 490px; height: 325px; margin: 0 auto; margin-top: 182px;}
#popup_glair .have_glair strong{width: 100%; font-size: 20px; color: #9c9c9c; float: left; text-align: center; font-weight: normal;}
#popup_glair .have_glair p{float: left; width: 100%; text-align: center; font-size: 22px; color: #292929; line-height: 35px; margin: 0; margin-top: 30px;}
#popup_glair .have_glair p span{color: #b90c0c;}
#popup_glair .have_glair .go_index{float: left; width: 100%; text-align: center;}
#popup_glair .have_glair .go_index span{width: 134px; height: 36px; border: 2px solid #a20611; line-height: 36px; color: #a20611; font-size: 17px; display: inline-block; margin-top: 35px; cursor: pointer;}
#popup_glair .have_glair .go_index span:hover{opacity: 0.8;}
#popup_glair .have_glair .go_glair{float: left; width: 100%; text-align: center; margin-top: 12px;}
#popup_glair .have_glair .go_glair a{font-size: 16px; color: #515151; text-align: center;}
#popup_glair .have_glair .go_glair a:hover{opacity: 0.8;}
#popup_glair .have_glair .bottom{float: left; width: 100%; text-align: center; font-size: 16px; color: #9c9c9c; margin-top: 60px;}
/* 首页鸡蛋白弹窗 End */


/* 首页头部浮动部分 Begin */
#follow-top{position: fixed; width: 100%; height: 75px; top: -75px; z-index: 10001; background: url(/img/index/follow-top-bg.png);}
#follow-top .content{width: 1230px; margin: 0 auto; height: 100%; overflow: hidden;}
#follow-top .logo{float: left; width: 85px; height: 52px; margin: 10px 0 0 15px;}
#follow-top .logo img{width: 85px; height: 52px;}
#follow-top .search{float: left; height: 42px; width: 620px; margin: 13px 0 0 118px;}
#follow-top .keywords{width: 525px; height: 40px; font-size: 12px; color: #121212; border: 1px solid #b90f0f; text-indent: 12px; letter-spacing: 2px;}
#follow-top .button{width: 91px; height: 42px; background: url(/img/icon_sprite/index_sprite.png) no-repeat -305px 0; border: none; margin-left: -4px; cursor: pointer;}
#follow-top .button:hover{background: url(/img/icon_sprite/index_sprite.png) no-repeat -401px 0;}
/* 首页头部浮动部分 End */

/* 新首页CSS End